<template>
	<div class="comment">
		<section class="scroll-navbar" v-if="channels">
			 <Navbar v-model="column_id">
	            <TabItem 
	                v-for="(item,index) in channels" 
	                :id="item.column_id" 
	                :key="item.column_id"
	                >
	                {{ item.column_name }}
	                <slot name="name">
	                    <p class="active"></p>
	                </slot>    
	            </TabItem>
	        </Navbar>
		</section>
		<section class="border-t20 rating-content" v-if="data">
			<ul class="pl30rem pr30rem"  v-infinite-scroll="loadData" infinite-scroll-disabled="loading" infinite-scroll-distance="10" v-if="flag">
				<li class="layout-juscon mt30rem border-b pb40rem"  v-for="item in data">
					<img class="user-img circle" :src="img_url + item.icon" alt="">
					<div class="ml20rem flex_1"> 
						<div class="rating-title layout border-b pb30rem ">
							<div class="title-left">
								<div class="flex-left">
									<strong class="fs34rem c333 mr15rem">{{ item.name }}</strong>
									<span class="fs18rem white pt5rem pb5rem pl30rem pr10rem primary" v-if="item.growth_level == 1"></span>
									<span class="fs18rem white pt5rem pb5rem pl30rem pr10rem intermediate" v-if="item.growth_level == 2"></span>
									<span class="fs18rem white pt5rem pb5rem pl30rem pr10rem advanced" v-if="item.growth_level == 3"></span>
								</div>
								<!-- <p class="fs24rem c999 mt20rem">{{ item.goods_name }}</p> -->
							</div>
							<div class="">
								<p class="fs24rem c999 mb20rem align-center">{{item.time*1000,'yyyy-MM-dd'| formatDate  }}</p>
								<i class="iconfont icon-xingxing orange" v-for="i in item.judge_star"></i>
							</div>
						</div>
						<p class="fs30rem c333 bold pt30rem pb30rem">{{ item.content }}</p>
						<div class="img-list">
							<ul>
								<li v-for="items in item.img">
									<img class="responsive-img" :src="img_url + items" alt="">
								</li>
							</ul>
						</div>
						<router-link tag="button" :to="'/rating/all/' + item.judge_id + '?goods_id=' + goods_id + '&uid='+item.uid" class="block auto mt40rem circle-8 pt20rem pb20rem pl30rem pr30rem border fs28rem c333">查看他所有评价</router-link>
					</div>			
				</li>
			</ul>
			<template v-else>
				<default :imgUrl="img" explain='您还没有评星'></default>
			</template>
		</section>
	</div>
</template>

<script>
	import { getColumn,getRatingList } from '@/api/rating';
	import { InfiniteScroll, Navbar, TabItem } from 'mint-ui';
	import ScrollNavbar from '@/components/Scroll-navbar';
	import $toast from '@/utils/toast';
	import { formatDate } from '@/utils';
	import Default from "@/components/Default";
	export default{
		components:{
			ScrollNavbar,
			Navbar,
            TabItem,
            Default
		},
		directives:{
			InfiniteScroll
		},
		filters:
		{
			formatDate(time,fmt){
				let date = new Date(time);
				return formatDate(date,fmt);
			}  
		},
		data()
		{
			return{
				uid        : window.localStorage.getItem('uid'),
				goods_id   : this.$route.query.id,
				column_id  : 0,
				page_index : 1,
				data       : [],
				channels   : [],
				flag       : true,
				loading    : false,
				img_url    : process.env.IMG_URL,
				img        : require('../../assets/icon-goods2.png')
			}
		},
		watch:
		{
			column_id(newVal,oldVal)
			{
				this.loadInitData();
			}
		},
		created()
		{
			this.loadColumn();
		},
		methods:
		{	
			loadData()
			{
				this.loading = true;

				var params = {
					goods_id   : this.goods_id,
					column_id  : this.column_id,
					page_index : this.page_index++,
					page_size  : 10
				}
				getRatingList(params).then(res =>{
					if(res.data.length > 0 )
					{
						this.data = this.data.concat(res.data);
						this.loading = false;
					}
					else if (params.page_index > 1)
					{
						$toast('没有更多了');
					}
					else
					{
						this.flag = false;
					}
					if(res.data.length < params.page_size)
					{
						this.loading = true;
					}
				})
			},
			loadColumn()
			{
				getColumn( this.uid, this.goods_id ).then( res=> {
					this.channels = res.data;
				})
			},
			loadInitData()
			{
				this.data = [];
				this.page_index = 1;
				this.flag = true;
				this.loadData();
			}

		}
	}
</script>

<style lang="less">
.comment{
	.scroll-navbar {
        overflow-x: scroll; 
        overflow-y: hidden;
        width: 100%;
        box-sizing: border-box;
        background: #FFF;
        height: 100/28rem;
        line-height: 100/28rem;
        .mint-tab-item{
            padding-top: 0;            
            // padding-bottom: 20/28rem;
            // min-width: 56/28rem;
        }
        .mint-navbar {
            display: inline-flex;
            .mint-tab-item{
                margin-left: 28/28rem;
                margin-right: 28/28rem;
                white-space: nowrap;                 
            }
            .is-selected {
                font-weight: bold;
                color: #ff0036 !important;
                border-bottom: none;
                .mint-tab-item-label{
                    text-align: center; 
                    text-align: -webkit-center;
                    .active{
                        border-bottom-color: #ff0036 !important;
                    }
                }                
            }
            .active{
                display: block;
                width:80/28rem;
                border-bottom:2px solid #fff;
                margin-top: 32/28rem;                
            }
        }
        .mint-tab-item-label{
            font-size: 28/28rem;
        }
    }
    .user-img{
		width: 88/28rem;
		height: 88/28rem;
		object-fit: cover;
		border-radius: 50%;
	}
	.rating-content{ 
		.user-img{
			width: 88/28rem;
			height: 88/28rem;
			object-fit: cover;
			border-radius: 50%;
		}
		.rating-title{
			.title-left{
				span{
					width: 124/28rem;
					height: 33/28rem;
					display: block;
				}
				.primary{
					background: url(../../assets/icon8.png)no-repeat center /100% 100%;
				}
				.intermediate{
					background: url(../../assets/icon10.png)no-repeat center /100% 100%;
				}
				.advanced{
					background: url(../../assets/icon9.png)no-repeat center /100% 100%;
				}
			}
		}
		.img-list{
			ul{
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				grid-gap: 0.5rem;
			}
		}
		.comment-btn{
			border: 2px solid #666;
			display: block;
			margin:0 auto;
			margin-top: 40/28rem;
		}
	}
	.img-list{
		ul{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-gap: 0.5rem;
		}
	}
	.comment-btn{
		border: 2px solid #666;
		display: block;
		margin:0 auto;
		margin-top: 40/28rem;
	}
}

</style>